<template>
<div class="steps steps-horizontal w-full">
    <div class="step" 
    v-for="(item, index) in map" 
    :key="index" :class=" val >= index ? 'step-primary' : 'step-outline'">
        <span class="step-content">{{ item }}</span>
    </div>
</div>
</template>
<script>
export default {
    props: {
        map:{
            default() {
                return {};
            }
        },
        modelValue:{
            default() {
                return '';
            }
        },
    },
    emits: ['update:modelValue'],
    data() {
        return {
            val: this.modelValue
        }
    },
      watch:{
            val(val,old) {
                if(val!=this.modelValue){
                    this.$emit('update:modelValue', val); //修改值
                }
            },
            modelValue(val,old){
                if(val!=this.val){
                    this.val = val;
                }
            },
            map(){

            },
        }
}
</script>
